<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('文件上传')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <style type="text/css">
        .top90 {
            margin-top: 90px;
        }

        /*上传icon(必要)*/
        .kv-file-upload {
            display: none;
        }

    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-7">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h3>设置信息</h3>
            </div>
            <div class="ibox-content">
                <div class="tab-pane active" id="user_info">
                    <form class="form-horizontal" id="form-file">
                        <input name="fileType" type="hidden">
                        <!--隐藏ID-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">标题名称：</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="titleName" name="titleName"
                                       placeholder="取个名字吧">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">分类：</label>
                            <div class="col-sm-5">
                                <select id="fileClassDictId" class="form-control" name="fileClassDictId"
                                        th:with="type=${@dict.getType('hz_file_class')}">
                                    <option value="">----</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                            th:selected="${dict.default}"
                                            th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="ibox-title">
                <h3>上传内容</h3>
            </div>
            <div class="ibox-content">
                <div class="form-group">
                    <label class="col-sm-2 control-label" style="margin: 7px -48px 0px 37px;">上传类型：</label>
                    <div class="col-sm-5">
                        <select class="form-control" id="fileType">
                            <option value="1">套图</option>
                            <option value="2" selected>视频</option>
                        </select>
                    </div>
                </div>
                <div class="form-group top90" id="tu" style="display: none;">
                    <h3 class="font-noraml">套图上传</h3>
                    <div class="file-loading">
                        <input id="multipleFile" name="files" type="file" multiple>
                    </div>
                </div>
                <div class="form-group top90" id="sp">
                    <h3 class="font-noraml">视频上传</h3>
                    <div class="file-loading">
                        <input id="singleFile" name="file" type="file">
                    </div>
                </div>
            </div>
            <div class="ibox-content" style="margin: 0px 0px 50px 20%;">
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-7">
                        <button type="button" class="btn btn-sm btn-primary" onclick="submitFileInfo()"><i
                                class="fa fa-check"></i>保 存
                        </button>&nbsp;
                        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                                class="fa fa-reply-all"></i>关 闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:inline="javascript">
    var ftp = 2;
    var fileData = [];   //上传成功后的文件信息
    $("#form-file").validate({
        onkeyup: false,
        rules: {
            titleName: {
                required: true,
                maxlength: 100,
                remote: ctx + "fileUP/checkTitleNameUnique",
            },
            fileClassDictId: {
                required: true,
            },
        },
        messages: {
            "titleName": {
                required: "请添加标题名称",
                remote: "当前标题名已存在",
            },
            "fileClassDictId": {
                required: "请选择文件类型",
            },
        },
        focusCleanup: true
    });

    //1.保存
    function submitFileInfo() {
        ftp = $('#fileType').val();
        if ($.validate.form()) {   //上传保存校验
            $('#form-file input[name=fileType]').val(ftp);
            var file = $(".file-caption-info").text();
            if (file != null && file != undefined && file != '') {
                $.modal.loading(); //遮罩
                if (ftp == 1) {
                    $("#multipleFile").fileinput("upload"); //手动调用上传
                } else if (ftp == 2) {
                    $("#singleFile").fileinput("upload");  //手动调用上传
                }
            } else {
                $.modal.msgError('未选择文件');
            }
        }
    }

    //切换改变(上传内容)
    $('#fileType').change(function () {
        ftp = $(this).val();
        if (ftp == 1) {
            $('#tu').css('display', 'block');
            $('#sp').css('display', 'none');
        } else if (ftp == 2) {
            $('#tu').css('display', 'none');
            $('#sp').css('display', 'block');
        }
    });

    //2.
    $(document).ready(function () {
        // 多图上传
        $("#multipleFile").fileinput({
            uploadUrl: ctx + 'common/uploads',
            maxFileCount: 50,  //最大上传文件个数
            maxFileSize: 51200,  //50mb
            language: 'zh',
            showUpload: false,//是否显示上传按钮
            uploadAsync: false,
            allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png'],
            removeFromPreviewOnError: true, //当选择的文件不符合规则时(不是指定后缀文件、大小超出配置...)，选择的文件不会出现在预览框中，只会显示错误信息
            previewFileIcon: '<img src="/img/loading-upload.gif">',
        }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
            var rsp = data.response;
            if (rsp.code == 0) {
                var files = data.files;
                fileData = [];
                var fileJson = rsp.data;
                for (var i = 0; i < fileJson.length; i++) {
                    var fd = {};
                    fd.fileName = files[i].name;
                    fd.fileSize = files[i].size;
                    fd.fileUrl = fileJson[i].name;
                    fileData.push(fd);
                }
                file_upload_ok();
            }
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('');
        });

        //视频上传
        $("#singleFile").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxTotalFileCount: 1,
            maxFileSize: 5120000,  //5000mb
            language: 'zh',
            showUpload: false,//是否显示上传按钮
            allowedFileExtensions: ['mp4', 'avi', 'flv', 'wmv', '3gp'],
            removeFromPreviewOnError: true,
            previewFileIcon: '<img src="/img/loading-upload.gif">',
            dropZoneTitle: '视频文件上传',
        }).on('fileuploaded', function (event, data, previewId, index) {
            var rsp = data.response;
            if (rsp.code == 0) {
                fileData = [];
                var fd = {};
                fd.fileName = data.files[0].name.trim();
                fd.fileSize = data.files[0].size;
                fd.fileUrl = rsp.fileName;
                fileData.push(fd);
                file_upload_ok();
            }
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('');
        });
    });

    //选中文件后的处理事件
    $("#multipleFile").on("filebatchselected", function (event, files) {
        for (var key in files) {
            if (files.hasOwnProperty(key)) {
                var file = files[key];
                var fileName = file.name;
                var lastIndexOf = fileName.lastIndexOf('.');
                var titleName = fileName.substring(0, lastIndexOf);  //前缀名
                $('#titleName').val(titleName);
                $.validate.form();  //手动触发验证titleName
                return;   //默认第一张图片的名字
            }
        }
    });
    $("#singleFile").on("filebatchselected", function (event, files) {
            for (var key in files) {
                if (files.hasOwnProperty(key)) {
                    var file = files[key];
                    var fileName = file.name;
                    var lastIndexOf = fileName.lastIndexOf('.');
                    var titleName = fileName.substring(0, lastIndexOf);  //前缀名
                    $('#titleName').val(titleName.trim());
                    $.validate.form();
                }
            }
        }
    );

    //3.文件上传成功之后,请求接口保存数据
    function file_upload_ok() {
        var formData = $('#form-file').serializeArray();
        var parameter = {};
        parameter.fileType = formData[0].value;
        parameter.titleName = formData[1].value;
        parameter.fileClassDictId = formData[2].value;
        parameter.fileList = fileData;
        console.log('提交参数: ' + parameter);
        $.operate.saveModal(ctx + "fileUP/add", parameter, function (res) {
            if (res.code == 0) {
                refreshItem();
            } else {
                $.modal.msgError('保存失败');
                $.modal.closeLoading();
            }
        });
    }

</script>
</body>
</html>
